//-
    Match with Design Guide status:

        [x] 1. Example implementation
        [x] 2. Simple variable
        [x] 3. Unbound instances
        [x] 4. Bound instances and/or live feed
        [x] 5. {{#if }} ... {{/if}} block
        [x] 6. Test on mobile
        [ ] 7. Change sizes
        [ ] 8. Match theme
        [x] 9. This checklist

anchor example-component
.ui.segments
    h3.ui.top.attached.huge.block.header #[code example-component]
    .ui.attached.segment
        pre example-component(age="\{{ exampleComponent.age }}" birth="\{{ exampleComponent.birth }}")
        // a checkbox to toggle one component instance ||meets 5||
        checkbox(checked="{{ exampleComponent.show }}") Show/hide Bound component 1
        .ui.stackable.three.column.grid
            .column
                h3 Bound component 1
                // a component instance that is created on demand
                +if('exampleComponent.show')
                    example-component(age="{{ exampleComponent.age }}" birth="{{ exampleComponent.birth }}")
                    // simple ractive variables to be able to observe values ||meets 2||
                    p birth: {{ exampleComponent.birth }}
                    p age: {{ exampleComponent.age }}
            .column
                //
                h3 Bound component 2
                example-component(age="{{ exampleComponent.age }}" birth="{{ exampleComponent.birth1 }}")
                p birth: {{ exampleComponent.birth }}
                p age: {{ exampleComponent.age }}

            .column
                // Third instance is to prove it doesn't interfere with other instances ||meets 3||
                h3 Unbound (free) instance
                example-component(age="{{ exampleComponent.age2 }}" birth="{{ exampleComponent.birth2 }}")
                // simple ractive variables to be able to observe values
                p birth2: {{ exampleComponent.birth2 }}
                p age2: {{ exampleComponent.age2 }}
